<template>
  <card-layout title="矿山评分" class="mine-score" bg="3">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeScore',2)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>

    <div class="content-container">
      <!-- 矿山介绍 -->
      <div class="mine-intro-container">
        <div class="intro-box">
          <div class="intro-title">矿山介绍</div>
          <div class="intro-content">
            <div class="intro-item">
              <span class="label">矿山名称：</span>
              <span class="value">{{ mineInfo.name }}</span>
            </div>
            <div class="intro-item">
              <span class="label">所在地区：</span>
              <span class="value">{{ mineInfo.location }}</span>
            </div>
            <div class="intro-item">
              <span class="label">矿种类型：</span>
              <span class="value">{{ mineInfo.type }}</span>
            </div>
            <div class="intro-item">
              <span class="label">开采方式：</span>
              <span class="value">{{ mineInfo.miningMethod }}</span>
            </div>
            <div class="intro-item">
              <span class="label">生产规模：</span>
              <span class="value">{{ mineInfo.productionScale }}</span>
            </div>
            <div class="intro-item">
              <span class="label">开采年限：</span>
              <span class="value">{{ mineInfo.miningYears }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表容器 - 纵向排列 -->
      <div class="charts-container-vertical">
        <!-- 雷达图 -->
        <div class="chart-box">
          <div class="chart-title">矿山评分雷达图</div>
          <div ref="radarChartRef" class="chart"></div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { Search, Close, View, EditPen } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';

// 矿山基本信息
const mineInfo = ref({
  name: '青阳县矿山',
  location: '安徽省池州市青阳县',
  type: '石灰石矿',
  miningMethod: '露天开采',
  productionScale: '100万吨/年',
  miningYears: '30年'
});

// 筛选条件

// 筛选条件
const evaluationType = ref('all');
const scoreRange = ref('all');
const dateRange = ref([]);
const currentPage = ref(1);

// 图表引用
const radarChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: radarChart } = useChart(radarChartRef);

// 表格数据
const tableData = ref([
  {
    evaluationType: '安全评估',
    evaluationItem: '边坡稳定性',
    score: 92,
    evaluationTime: '2023-05-15',
    evaluator: '张工程师'
  },
  {
    evaluationType: '安全评估',
    evaluationItem: '爆破安全',
    score: 88,
    evaluationTime: '2023-05-15',
    evaluator: '张工程师'
  },
  {
    evaluationType: '环保评估',
    evaluationItem: '粉尘控制',
    score: 75,
    evaluationTime: '2023-05-16',
    evaluator: '李环保'
  },
  {
    evaluationType: '环保评估',
    evaluationItem: '水资源保护',
    score: 82,
    evaluationTime: '2023-05-16',
    evaluator: '李环保'
  },
  {
    evaluationType: '生产效率',
    evaluationItem: '采矿效率',
    score: 90,
    evaluationTime: '2023-05-17',
    evaluator: '王生产'
  },
  {
    evaluationType: '生产效率',
    evaluationItem: '运输效率',
    score: 85,
    evaluationTime: '2023-05-17',
    evaluator: '王生产'
  },
  {
    evaluationType: '资源利用',
    evaluationItem: '资源回收率',
    score: 78,
    evaluationTime: '2023-05-18',
    evaluator: '赵资源'
  }
]);

// 表格头部样式
const headerCellStyle = {
  background: '#0a2e5c',
  color: '#fff',
  fontWeight: 'bold',
  borderColor: '#164b87'
};

// 根据分数获取样式类
const getScoreClass = (score) => {
  if (score >= 90) return 'score-excellent';
  if (score >= 80) return 'score-good';
  if (score >= 70) return 'score-average';
  if (score >= 60) return 'score-pass';
  return 'score-fail';
};

// 初始化雷达图
const initRadarChart = () => {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      data: ['本次评分', '行业平均'],
      textStyle: {
        color: '#fff'
      },
      right: 10,
      top: 10
    },
    radar: {
      indicator: [
        { name: '安全评估', max: 100 },
        { name: '环保评估', max: 100 },
        { name: '生产效率', max: 100 },
        { name: '资源利用', max: 100 },
        { name: '经济效益', max: 100 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(16, 65, 125, 0.1)', 'rgba(16, 65, 125, 0.2)', 'rgba(16, 65, 125, 0.3)', 'rgba(16, 65, 125, 0.4)', 'rgba(16, 65, 125, 0.5)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      name: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    series: [{
      name: '矿山评分',
      type: 'radar',
      data: [
        {
          value: [90, 78, 88, 78, 85],
          name: '本次评分',
          areaStyle: {
            color: 'rgba(64, 158, 255, 0.4)'
          },
          lineStyle: {
            color: '#409EFF'
          },
          itemStyle: {
            color: '#409EFF'
          }
        },
        {
          value: [80, 75, 80, 72, 78],
          name: '行业平均',
          areaStyle: {
            color: 'rgba(250, 200, 88, 0.4)'
          },
          lineStyle: {
            color: '#fac858'
          },
          itemStyle: {
            color: '#fac858'
          }
        }
      ]
    }]
  };

  radarChart.value.setOption(option);
};



// 搜索处理
const handleSearch = () => {
  console.log('搜索条件:', {
    evaluationType: evaluationType.value,
    scoreRange: scoreRange.value,
    startDate: dateRange.value ? dateRange.value[0] : '',
    endDate: dateRange.value ? dateRange.value[1] : ''
  });
  // 这里可以添加实际的搜索逻辑
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加分页加载数据的逻辑
};

onMounted(() => {
  // 初始化图表
  initRadarChart();
});
</script>

<style lang="scss" scoped>
.mine-score {
  box-sizing: border-box;
  height: 100%;
  min-width: 500px;
  color: #fff;
  
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  
  .more-div:active {
    scale: 0.8;
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    height: calc(100% - 44px);
    overflow: hidden;

    .mine-intro-container {
      margin-bottom: 16px;

      .intro-box {
        background-color: rgba(16, 65, 125, 0.3);
        border: 1px solid rgba(31, 198, 255, 0.3);
        border-radius: 4px;
        padding: 16px;

        .intro-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 16px;
          color: #1fc6ff;
        }

        .intro-content {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;

          .intro-item {
            .label {
              color: #bbcfff;
            }
            .value {
              color: #fff;
              margin-left: 5px;
            }
          }
        }
      }
    }



    .charts-container-vertical {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
      gap: 16px;

      .chart-box {
        background-color: rgba(16, 65, 125, 0.3);
        border: 1px solid rgba(31, 198, 255, 0.3);
        border-radius: 4px;
        padding: 16px;
        height: 250px;

        .chart-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #1fc6ff;
          text-align: center;
        }

        .chart {
          width: 100%;
          height: calc(100% - 26px);
        }
      }
    }

    .filter-container {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
      gap: 16px;
      background-color: rgba(16, 65, 125, 0.3);
      border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      padding: 16px;

      .filter-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .filter-item {
        width: 150px;
        margin-right: 10px;
      }
      
      .date-range-picker {
        width: 280px;
        margin-right: 10px;
      }

      .search-btn {
        margin-left: 5px;
      }
    }

    .table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: rgba(16, 65, 125, 0.3);
      border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      padding: 8px;
      overflow: hidden;

      .score-excellent {
        color: #19be6b;
        font-weight: bold;
      }

      .score-good {
        color: #409eff;
        font-weight: bold;
      }

      .score-average {
        color: #fac858;
        font-weight: bold;
      }

      .score-pass {
        color: #ff9f43;
        font-weight: bold;
      }

      .score-fail {
        color: #ff6b6b;
        font-weight: bold;
      }

      .operation-btns {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .pagination {
        margin-top: 16px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

:deep(.header) {
  background-position: left !important;
  background-size: contain !important;
}

// 覆盖 Element Plus 样式
:deep(.el-table) {
  background-color: transparent;
  color: #fff;

  th.el-table__cell {
    background-color: #0a2e5c;
  }

  td.el-table__cell {
    background-color: rgba(16, 65, 125, 0.3);
    border-color: rgba(31, 198, 255, 0.3);
  }

  tr:hover > td.el-table__cell {
    background-color: rgba(22, 75, 135, 0.5) !important;
  }
}

:deep(.el-pagination) {
  --el-pagination-bg-color: rgba(16, 65, 125, 0.5);
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(16, 65, 125, 0.3);
  box-shadow: 0 0 0 1px rgba(31, 198, 255, 0.3) inset;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-select-dropdown__item) {
  color: #fff;
}

:deep(.el-select-dropdown) {
  background-color: #0a2e5c;
  border: 1px solid rgba(31, 198, 255, 0.3);
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(22, 75, 135, 0.5);
}

:deep(.el-date-editor) {
  --el-datepicker-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-text-color: #fff;
  --el-datepicker-inner-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-off-text-color: #888;
  --el-datepicker-header-text-color: #fff;
}
</style>